<template>
  <view class="dy-scroll-container">
    <dy-navbar title="按钮" />
    <scroll-view class="dy-scroll" scroll-y>
      <!-- 基础用法 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="基础用法" />
        <template slot="body">
          <dy-button type="primary">基础用法</dy-button>
        </template>
      </dy-card>
      <!-- 按钮类型 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="按钮类型" />
        <template slot="body">
          <dy-button type="primary">主要按钮</dy-button>
          <dy-button type="secondary">次要按钮</dy-button>
          <dy-button type="warn">警告按钮</dy-button>
          <dy-button type="line">线框按钮</dy-button>
          <dy-button type="text">文字按钮</dy-button>
          <dy-button type="text" custom-class="dy-primary">主色文字按钮</dy-button>
        </template>
      </dy-card>
      <!-- 按钮尺寸 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="按钮尺寸" />
        <template slot="body">
          <dy-button size="large">大按钮</dy-button>
          <dy-button size="default">普通按钮</dy-button>
          <dy-button size="medium">中按钮</dy-button>
          <dy-button size="small">小按钮</dy-button>
          <dy-button size="tiny">超小按钮</dy-button>
          <dy-button size="mini">迷你按钮</dy-button>
        </template>
      </dy-card>
      <!-- 圆角按钮 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="圆角按钮" />
        <template slot="body">
          <dy-button type="primary" size="default" round>普通按钮</dy-button>
          <dy-button type="secondary" size="medium" round>中按钮</dy-button>
          <dy-button type="warn" size="small" round>小按钮</dy-button>
          <dy-button type="line" size="tiny" round>超小按钮</dy-button>
          <dy-button type="primary" size="mini" round>迷你按钮</dy-button>
        </template>
      </dy-card>
      <!-- 按钮禁用 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="按钮禁用" />
        <template slot="body">
          <dy-button type="primary" size="large" disabled>大按钮</dy-button>
          <dy-button type="secondary" size="default" disabled>普通按钮</dy-button>
          <dy-button type="warn" size="medium" disabled>中按钮</dy-button>
          <dy-button type="line" size="small" disabled>小按钮</dy-button>
          <dy-button type="primary" size="tiny" disabled>超小按钮</dy-button>
          <dy-button type="primary" size="mini" disabled>迷你按钮</dy-button>
        </template>
      </dy-card>
      <!-- 渐变按钮 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="渐变按钮" />
        <template slot="body">
          <dy-button
            type="primary"
            size="large"
            :custom-style="{
              background: 'linear-gradient(90deg, #6F8EFF 0%, #4731FF 100%)',
              boxShadow: '0px 8px 8px 0px rgba(66, 106, 255, 0.16);'
            }"
          >
            大按钮
          </dy-button>
          <dy-button
            type="primary"
            size="default"
            :custom-style="{
              background: 'linear-gradient(90deg, #6F8EFF 0%, #4731FF 100%)',
              boxShadow: '0px 8px 8px 0px rgba(66, 106, 255, 0.16);'
            }"
          >
            普通按钮
          </dy-button>
          <dy-button
            type="primary"
            size="medium"
            :custom-style="{
              background: 'linear-gradient(90deg, #6F8EFF 0%, #4731FF 100%)',
              boxShadow: '0px 8px 8px 0px rgba(66, 106, 255, 0.16);'
            }"
          >
            中按钮
          </dy-button>
          <dy-button
            type="primary"
            size="small"
            :custom-style="{
              background: 'linear-gradient(90deg, #6F8EFF 0%, #4731FF 100%)',
              boxShadow: '0px 8px 8px 0px rgba(66, 106, 255, 0.16);'
            }"
          >
            小按钮
          </dy-button>
          <dy-button
            type="primary"
            size="tiny"
            :custom-style="{
              background: 'linear-gradient(90deg, #6F8EFF 0%, #4731FF 100%)',
              boxShadow: '0px 8px 8px 0px rgba(66, 106, 255, 0.16);'
            }"
          >
            超小按钮
          </dy-button>
          <dy-button
            type="primary"
            size="mini"
            :custom-style="{
              background: 'linear-gradient(90deg, #6F8EFF 0%, #4731FF 100%)',
              boxShadow: '0px 8px 8px 0px rgba(66, 106, 255, 0.16);'
            }"
          >
            迷你按钮
          </dy-button>
        </template>
      </dy-card>
      <!-- 按钮宽度 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="按钮宽度" />
        <template slot="body">
          <dy-button type="line" width="100%" custom-class="dy-mg-bottom-8">
            100%
          </dy-button>
          <dy-button type="secondary" width="300">300px</dy-button>
          <dy-button type="primary" width="50%" custom-class="dy-mg-bottom-8">
            50%
          </dy-button>
          <dy-button type="secondary" width="225">225px</dy-button>
        </template>
      </dy-card>
      <!-- 加载中按钮 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="加载中按钮" />
        <template slot="body">
          <dy-button type="primary" size="large" loading>大按钮</dy-button>
          <dy-button type="secondary" size="default" loading>普通按钮</dy-button>
          <dy-button type="warn" size="medium" loading>中按钮</dy-button>
          <dy-button type="line" size="small" loading>小按钮</dy-button>
          <dy-button type="primary" size="tiny" loading>超小按钮</dy-button>
          <dy-button type="primary" size="mini" loading>迷你按钮</dy-button>
        </template>
      </dy-card>
      <!-- 自定义样式 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="自定义样式" />
        <template slot="body">
          <dy-button color="#ffffff" bg-color="#ff508a" custom-class="dy-mg-top-12" round>
            <dy-icon name="check" />
            <text class="dy-mg-left-12">带勾选按钮</text>
          </dy-button>
          <dy-button
            size="large"
            width="100%"
            color="#ffffff"
            bg-color="#ff508a"
            custom-class="dy-mg-top-12"
          >
            <view class="dy-flex-column-center dy-h-100P">
              <view class="dy-lh-1 dy-mg-bottom-12">主按钮</view>
              <view class="dy-lh-1 dy-fz-24">副文本</view>
            </view>
          </dy-button>
        </template>
      </dy-card>
    </scroll-view>
    <!-- 吸底按钮 -->
    <dy-bottom-bar>
      <dy-button width="100%" type="primary" size="large" round>
        吸底按钮
      </dy-button>
    </dy-bottom-bar>
  </view>
</template>

<script>
export default {
  name: 'Button',
  methods: {
    handleButtonClick() {
      console.log('按钮点击了')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .dy-button {
  margin-right: 12rpx;
}
.section {
  padding-bottom: 24rpx;
  .title {
    padding: 24px 0;
    font-size: 32rpx;
  }
}
</style>
